<template>
  <a-modal
    title="数据类型维护"
    :width="800"
    centered
    :visible="visible"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
    </template>
    <a-form layout="inline" :form="form" @submit="handleSubmit">
      <a-form-item>
        <a-input
          :max-length="100"
          v-decorator="['code', { rules: [{ required: true, message: '请填写类型编码!' }] }]"
          placeholder="类型编码"
        ></a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          :max-length="100"
          v-decorator="['name', { rules: [{ required: true, message: '请填写类型名称!' }] }]"
          placeholder="类型名称"
        ></a-input>
      </a-form-item>
      <a-form-item>
        <a-select
          style="width:120px"
          placeholder="展现方式"
          v-decorator="['display', { rules: [{ required: true, message: '请选择展现方式!' }] }]" >
          <a-select-option v-for="(item,index) in displayDropDown" :key="index" :value="item.code" >{{ item.value }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item>
        <a-button :loading="submitLoading" icon="plus" type="primary" html-type="submit" :disabled="hasErrors(form.getFieldsError())">
          添加
        </a-button>
      </a-form-item>
    </a-form>
    <a-divider />
    <a-table
      bordered
      :data-source="dataList"
      :columns="columns"
      :scroll="{ y: 350 }"
      size="small"
      :pagination="false"
      :rowKey="(record) => record.id"
    >
      <template slot="typeName" slot-scope="text, record">
        <a-input v-if="record.isEdit" v-model="record.name"></a-input>
        <span v-else>{{ text }}</span>
      </template>
      <template slot="display" slot-scope="text, record">
        <a-select v-if="record.isEdit" v-model="record.display" style="width:100px" >
          <a-select-option v-for="(item,index) in displayDropDown" :key="index" :value="item.code" >{{ item.value }}</a-select-option>
        </a-select>
        <span v-else>{{ getDisplayName(text) }}</span>
      </template>

      <template slot="action" slot-scope="text, record">
        <span v-if="record.isEdit">
          <a-button type="primary" size="small" @click="saveEdit(record)">保存</a-button>
        </span>
        <span v-else>
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => removeRecord(record)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
import {
  baseDataTypeList,
  baseDataTypeAdd,
  baseDataTypeDelete,
  baseDataTypeEdit
} from '@/api/modular/main/tsdatarecord/baseDataType'
import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
import _ from 'lodash'

export default {
  name: 'DataType',
  data() {
    return {
      visible: false,
      dataList: [],
      displayDropDown: [],
      form: this.$form.createForm(this, { name: 'dataType_add' }),
      submitLoading: false,
      columns: [
        {
          title: '类型编码',
          dataIndex: 'code',
          scopedSlots: { customRender: 'typeCode' }
        },
        {
          title: '类型名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'typeName' }
        },
        {
          title: '展示方式',
          dataIndex: 'display',
          scopedSlots: { customRender: 'display' }
        },
        {
          title: '操作',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  methods: {
    init() {
      this.visible = true
      this.loadData()
    },
    loadData() {
      baseDataTypeList().then(res => {
        if (res.success) {
          this.dataList = res.data
        }
      })
      sysDictTypeDropDown({ code: 'BASEDATA_DISPLAY' }).then((res) => {
        this.displayDropDown = res.data
      })
    },
    getDisplayName(code) {
      const obj = _.find(this.displayDropDown, { 'code': code })
      if (obj) {
        return obj.value
      }
      return code
    },
    handleSubmit(e) {
      e.preventDefault()

      this.form.validateFields((err, values) => {
        if (!err) {
          this.submitLoading = true
          baseDataTypeAdd(values).then(res => {
            if (res.success) {
              if (res.code === 200) {
                this.$message.success('添加成功！')
              } else {
                this.$message.warning(res.message)
              }
            }
            this.form.resetFields()
            this.loadData()
            this.$emit('success')
            this.submitLoading = false
          }).catch(() => {
            this.$message.error('添加失败！')
            this.submitLoading = false
          }).finally(() => {
            this.submitLoading = false
          })
        }
      })
    },
    edit(record) {
      record.isEdit = true
      this.$forceUpdate()
    },
    saveEdit(record) {
      baseDataTypeEdit(record).then(res => {
        if (res.success) {
          if (res.code === 200) {
            this.$message.success('保存成功！')
            record.isEdit = false
            this.loadData()
          } else {
            this.$message.warning(res.message)
          }
        }
      }).catch(() => {
        this.$message.error('保存失败！')
      })
    },
    removeRecord(record) {
      baseDataTypeDelete(record).then(res => {
        if (res.success) {
          if (res.code === 200) {
            this.$message.success('删除成功！')
            this.loadData()
          } else {
            this.$message.warning(res.message)
          }
        }
      }).catch(() => {
        this.$message.error('删除失败！')
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },
    hasErrors(fieldsError) {
      return Object.keys(fieldsError).some(field => fieldsError[field])
    }
  }
}
</script>

<style scoped>

</style>
